<template>
	<view class="pageBg">
		<view class="header bg_w flex_r_sb_c">
			<text>是否已设置密码</text>
			<switch class="switch" :checked="hasPwd" color="#55AC6B" @change="switchChange" />
		</view>
		<view class="footer bg_w flex_r_c_c">
			<button type="default" class="footerBtn f_32 fw_600 tc_1" :disabled="sending" :loading="sending" @click="doPay">支付</button>
		</view>
		<fr-safekey-pwd v-if="safeKeyVisible" :paymentInfo="paymentInfo" :hasPwd="hasPwd" @finishTyping="finishTyping" @closeSafekey="safeKeyVisible=false"></fr-safekey-pwd>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				safeKeyVisible: false,
				hasPwd: true,
				curPwd: '',
				paymentInfo: {
					targetId: '01',
					targetName: '纳格·大霍澈斯基',
					amount: '999.99'
				},
				sending: false,
			};
		},
		methods: {
			switchChange(e) {
				this.hasPwd = e.detail.value
			},
			doPay() {
				this.safeKeyVisible = true
			},
			finishTyping(e) {
				console.log(e)
				this.curPwd = e.pwd
				this.safeKeyVisible = false
				uni.showToast({
					title: '支付中',
					icon: 'loading',
					duration: 1500,
				})
				setTimeout(() => {
					uni.showToast({
						title: '支付成功!',
						icon: 'success',
						duration: 1500,
					})
				}, 1800)
			},
		},
	}
</script>

<style lang="scss">
page {
	background-color: #F8F8F8;
	height: 100%;
}
</style>
<style lang="scss" scoped>
.pageBg {
	.header {
		width: 100%;
		height: 104rpx;
		padding: 0 28rpx;
		box-sizing: border-box;
		.switch {
			transform:scale(0.8)
		}
	}
	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 108rpx;
		padding: 0 28rpx;
		box-sizing: border-box;
		box-shadow: 0rpx -8rpx 16rpx rgba(204, 204, 204, 0.15);
		.footerShare {
			position: relative;
			.shareBtn {
				width: 108rpx;
				height: 40rpx;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
			}
		}
		.footerBtn {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #55AC6B;
			color: #FFF;
			box-shadow: 0rpx -8rpx 16rpx rgba(204, 204, 204, 0.15);
			border-radius: 44rpx;
			margin-left: 0rpx;
			margin-right: 0rpx;
		}
	}
}
</style>
